<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
		<title>诉求评价</title>
		<link rel="stylesheet" type="text/css" href="../../css/feedback.css" />
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/app.css">
		<style>
			body{background:#eee;overflow: auto;}
			.mui-content{background: #eee;margin-top: 0.0rem;padding: 0 !important;}
			.mui-bar{width:7.5rem;height: 0.9rem !important;}
			.mui-table-view-cell{overflow: inherit;}
			.title_box{background: #fff;width: 7.5rem;height: 2rem;padding-left: 0.24rem;padding-top: 0.31rem}
			.bg_blue{background:#f8c96f;}
			.bg_blue01{background:#79c3f7;}
			.bg_green{background:#60e9e1;}
			.mui-media-box{padding:.38rem 0 0 .38rem;float:left;width: 100%;}
			.navigate_img{width:.43rem;height:.43rem;display:block;border-radius:.04rem;float:left;margin-right:.13rem;margin-top:.01rem;}
			.navigate_img>img{width:.25rem !important;margin:0.09rem 0 0 0.09rem;}
			.title_box .mui-media-body{width:6.2rem;float:left;overflow:visible;}
			.title_box .mui-media-body>div{width:100%;float:left;}
			.title_box .mui-media-body .body_view{font-size:.3rem;}
			.title_box .mui-media-body .body_view>span,.title_box .mui-media-body .mui-ellipsis>span{float:left;width:4rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
			.title_box .mui-media-body .work_time{color:#b0b0b0;font-size:.24rem;}
			.title_box .mui-media-body .mui-ellipsis{color:#666;font-size:.24rem;overflow:visible;}
			.title_box .icon-more{width:.45rem;float:right;height:.45rem;position:relative;}
			.title_box .icon-more>img{margin-top:-.03rem;}
			.title_box .zhuangtai{width:1.68rem;float:right;text-align:right;font-size:.28rem;margin-top:-.07rem;overflow:hidden;}			
			.info{width: 100%;height: 0.78rem;background: #eeeeee;color: #333333;font-size: 0.28rem;padding-left: 0.24rem;line-height: 0.78rem;}		
			.time{background: #fff;width: 100%;height: 1.1rem;line-height: 1.1rem;padding-left: 0.24rem;padding-right: 0.24rem;}
			.time input{width: 1rem;height: 0.64rem;float: right;margin-top: 0.21rem;margin-right: 0.21rem;}
			.time span:first-child{float: left;}
			.time span:nth-child(2){float: right;}
			.mui-table-view-cell.mui-active{background-color: #fff;}
			
			.mui-table-view .mui-table-view-cell{font-size: 0.28rem;}
			.btn_box{padding-left: 0.69rem;height: 1.34rem;}
			.btn_box div{width: 0.46rem;height: 0.45rem;float: left;margin-right: 0.9rem;position: relative;}
			.btn_box div:last-child{margin: 0;}
			.zan{background: url(../../images/work/zan.png) no-repeat center center;background-size: cover;}
			.flower{background: url(../../images/work/flower.png) no-repeat center center;background-size: cover;}
			.aixin{background: url(../../images/work/aixin.png) no-repeat center center;background-size: cover;}
			.buhao{background: url(../../images/work/buhao.png) no-repeat center center;background-size: cover;}
			.no{background: url(../../images/work/no.png) no-repeat center center;background-size: cover;}
			.btn_box div span{display: block;width: 2rem;text-align: center;position: absolute;left: -0.8rem;bottom: -0.5rem;}
		
			.banshi{margin-top: 0.1rem;}
			.banshi_title span:first-child{font-size: 0.3rem;}
			.banshi_title span:last-child{font-size: 0.28rem;color: #d0d0d0;}
			.banshi_star{height: 0.87rem;}
			.banshi_star div{float: left;margin-right: 0.2rem;width: 0.4rem;height: 0.4rem;background: url(../../images/work/star0.png) no-repeat center center;background-size: cover;}
		
			.text_box{width: 100%;height: 4.01rem;background: #fff;margin-top: 0.1rem;padding-left: 0.24rem;padding-top: 0.3rem;}
			.text_box textarea{background: #eee;border: none;width: 7.07rem;height: 2.24rem;margin-top: 0.2rem;}
			.time_cishu{float: right; width: 3.2rem; height: .65rem;}
			.time_cishu .mui-numbox{width: 2.6rem;}
			.mui-numbox{border:1px solid #007bff;border-radius: 0;}
			.mui-numbox [class*=numbox-btn]{background-color: #007bff;border-radius: 0; color: #fff;}
			.mui-numbox .mui-numbox-input{border: none!important;}
			.mui-btn-blue{padding: .2rem 0; width: 6rem; margin:.5rem auto;}
			.btn_box .active:nth-of-type(1){background: url(../../images/work/zan1.png) no-repeat center center; background-size: cover; color: #ff6000;}
			.btn_box .active:nth-of-type(2){background: url(../../images/work/flower1.png) no-repeat center center; background-size: cover; color: #ff6000;}
			.btn_box .active:nth-of-type(3){background: url(../../images/work/aixin1.png) no-repeat center center; background-size: cover; color: #ff6000;}
			.btn_box .active:nth-of-type(4){background: url(../../images/work/buhao1.png) no-repeat center center; background-size: cover; color: #ff6000;}
			.btn_box .active:nth-of-type(5){background: url(../../images/work/no1.png) no-repeat center center; background-size: cover; color: #ff6000;}
			.text_box{position: relative;}
			.text_box .tips{position: absolute; right: .3rem; bottom: .95rem; font-size: .24rem; color: #999999;}														
		
		    /*意见列表*/
		   	.material_list_right>h6 .titles{line-height:.55rem;font-size:.28rem;color:#333;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:5.5rem;float:left;}
		</style>
	</head>
	<body>
		<!--<div class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<a class="back">返回</a>
			<h1 class="mui-title">我的评价</h1>
		</div>-->
		<div class="mui-content" id="itemContents">
			<div class="title_box">
				<span class="navigate_img bg_blue">
				<img class="tjfwl" src="../../images/work/icon-shh-@2x.png">
				</span>
				<div class="mui-media-body">
					<div class="body_view">
						<span>{{sqInfoReg.title}}</span>
						<div class="icon-more"></div></div>
					<div class="work_time">{{sqInfoReg.regTime}}</div>
					<div class='mui-ellipsis'>
						<span>诉求编号: {{sqInfoReg.sqCode}}</span>
					</div>
				</div>
			</div>		
			<!--评价列表-->
			<form v-for="(replyInfo,index) in sqInfoReplyLists">
				<input type="hidden" :id="'pjTerm'+index+''" value="5" />
				<div class="text_box" style="height:1rem;">
					<span>回复单位：</span><span>{{replyInfo.organName}}</span>
				</div>
				<div class="text_box">
					<span>回复内容：</span>
					<textarea  disabled="true" style="height:2.8rem !important">{{replyInfo.replyContent}}</textarea>	
				</div>
				<ul class="mui-table-view manyi" v-if="replyInfo.isEvalFlag">
				    <li class="mui-table-view-cell btn_box">
				    	<div class="eva zan active" :id="''+index+''" valNum="5">
				    		<span>非常满意</span>
				    	</div>
				    	<div class="eva flower" :id="''+index+''" valNum="4">
				    		<span>满意</span>
				    	</div>
				    	<div class="eva aixin" :id="''+index+''" valNum="3">
				    		<span>基本满意</span>
				    	</div>
				    	<div class="eva buhao" :id="''+index+''" valNum="2">
				    		<span>不满意</span>
				    	</div>
				    	<div class="eva no" :id="''+index+''" valNum="1">
				    		<span>非常不满意</span>
				    	</div>
				    </li>
				</ul>
				
				<div class="text_box" style="height:1rem;" v-if="replyInfo.evalFlag">
					<span>满意度：</span><span>{{replyInfo.pjTerm}}</span><br>
				</div>
				<div class="text_box" v-if="replyInfo.isEvalFlag">
					<span>评价内容：</span>
					<textarea name="" rows="" cols="" placeholder="请输入评价内容" :id="'content'+index+''"></textarea>	
					<span class="tips">最多不超过50个字</span>
				</div>
				<div class="text_box" v-if="replyInfo.evalFlag">
					<span>评价内容：</span>
					<textarea name="" rows="" cols="" placeholder="请输入评价内容" disabled="true">{{replyInfo.evalContent}}</textarea>	
				</div>
				<button v-if="replyInfo.isEvalFlag" type="button" class="mui-btn mui-btn-blue mui-btn-block ripple" :id="''+index+''" :oid="replyInfo.oid">评价</button>			
			 </div>
		</form>
	</body>
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/common.js"></script>
	<script src="../../js/app.js"></script>	
	<script src="../../js/jquery2.2.4.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../js/feedback.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../js/vue.min.js"></script>
	<script type="text/javascript">
		mui.plusReady(function() {
			    //获取从上一个页面获取到参数
				var oid = utils.getUrlParam('oid');
				//加载办件信息
				loadData(oid);
			});
			
			var itemContents = new Vue({
				el: '#itemContents',
				data: {
				sqInfoReg:{}, //诉求基本信息
				sqInfoReplyLists:[]
				}
			});
			
		/**
		 * 加载办件数据
		 * @param {Object} oid 评价主键
		 */
		function loadData(oid){
			var param = jsonToParams({
				'sqInfoRegId':oid,				
			    });
			var url = 'appHttpService/initSqEvaluate.do';
			utils.ajax(url, function(data) {
				data = JSON.parse(data);
				if(data.state == 0) {				
					//诉求信息
					var sqInfoReg = data.sqInfoRegVo;
					itemContents.sqInfoReg = {
						title:sqInfoReg.title,
						sqCode: sqInfoReg.sqCode,
						regTime:utils.format(sqInfoReg.regTime,'yyyy-MM-dd HH:mm:ss'),												
					};	
				
					//回复列表
				    var sqInfoReplyList = JSON.parse(data.sqInfoReplyListVo);
				    var sqInfoReplyLists = [];
					if(sqInfoReplyList != null ){//回复列表记录
						replyInfoLists = convertSqInfoReplyList(sqInfoReplyList);
					}							
					//将或得的意见列表数据添加到vue中
					itemContents.sqInfoReplyLists = itemContents.sqInfoReplyLists.concat(replyInfoLists);
					
				}else{
					mui.toast('未找到相关信息');					
				}
			}, param);
		}
		
		/**
		 * 回复列表字段组装
		 * @param {Object} items 服务端返回列表数据
		 */
		function convertSqInfoReplyList(items) {
			var newItems = [];				
			items.forEach(function(item) {	
				  //已评价的诉求		
				  var pjTerm ="";
				  var evalContent = "";
				  if(item.sqInfoEval != undefined){				  		
				   	if(item.sqInfoEval.evalTarget == 1){
				   		pjTerm = "非常不满意";
				   	}else if(item.sqInfoEval.evalTarget  == 2){
				   		pjTerm = "不满意";
				   	}else if(item.sqInfoEval.evalTarget  == 3){
				   		pjTerm = "基本满意";
				   	}else if(item.sqInfoEval.evalTarget  == 4){
				   		pjTerm = "满意";
				   	}else if(item.sqInfoEval.evalTarget  == 5){
				   		pjTerm = "非常满意";
				   	}
				    evalContent = item.sqInfoEval.evalContent;
				   	
				  }
				  
				  var isEvalFlag = false;
				   var evalFlag = false;
				   if(item.sqEvalId == undefined || item.sqEvalId == null || item.sqEvalId == '' || item.sqEvalId.trim() == '' ){
				   	  isEvalFlag = true;
				   }else{
				   	  evalFlag = true;
				   }
				   
				  newItems.push({
					oid:item.oid,
					pjTerm:pjTerm,
					evalContent:evalContent,
					replyContent: item.replyContent,
					organName: item.sysOrgan.name,
					isEvalFlag : isEvalFlag,
					evalFlag : evalFlag
				});
			  });
			return newItems;		
		}
	    /**
	     * 满意度评价
	     */
		mui("body").on('tap',".eva",function(){
			$(this).addClass('active').siblings('.eva').removeClass('active')
			var pjTerm = $(this).attr('valNum');
			var index = $(this).attr('id');
			//设置满意度
			document.getElementById('pjTerm'+index).value = pjTerm;				
			})
		/**
		 * 提交评价
		 */
		mui("body").on('tap',".mui-btn",function(){
			//用于区分列表Id的下标数
			var index = $(this).attr('id');
			//回复Id
			var replyId = $(this).attr('oid');
			//诉求Id
			var sqInfoId = utils.getUrlParam('oid');
			//用户Id
			var userId = getUserId();
			//满意度
			var pjTerm = document.getElementById('pjTerm'+index).value ;
			//评价内容
			var content = document.getElementById('content'+index).value ;
			if(pjTerm == '' || pjTerm == null || pjTerm == undefined){
				mui.toast("选择满意度");
				return false;
			}
			if(content == '' ){
				mui.toast("评价内容不能为空");
				return false;
			}
			if(content.length > 50){
				mui.toast("评价内容字数不能大于50");
				return false;
			}
			
			 var param = jsonToParams({
	        	sqInfoId:sqInfoId,
	        	replyId:replyId,
	        	userId:userId,
	        	pjTerm:pjTerm,
	        	content:content	        	
	        })
			var url = 'appHttpService/saveSqEvaluate.do';
		    utils.ajax(url, function(data) {
					data = JSON.parse(data);
					if(data.state == 0) {//评价成功，刷新页面	
						window.location.reload(); 
						var oid = data.sqInfoId;
					    loadData(oid);					
					}else{
						mui.toast("评价失败")
					}
			}, param);		
			
		})			
	</script>
</html>